<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>X</title>

    {include file='/_template/head/head.mobile.html'}
    {include file='/_template/head/head.wx.jssdk.html'}

    <script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js?__v=0"
            charset="utf-8"></script>
    <script src="{x_res}/common.js"></script>
    <script src="{x_res}/app/app.js"></script>
    <link rel="stylesheet" href="{x_res}/common.css" type="text/css">
    <link rel="stylesheet" href="{x_res}/app/app.css" type="text/css">

    <script src="{x_res_common}/vue/vue.js"></script>

    <link rel="stylesheet" href="{x_res_common}/bootstrap/css/bootstrap.min.css" type="text/css">
    <script src="{x_res_common}/bootstrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="{x_res_common}/mobiscroll/mobiscroll-2.13.2.full.min.css"
          type="text/css">
    <script src="{x_res_common}/mobiscroll/mobiscroll-2.13.2.full.min.js"></script>

    <script src="{x_res_common}/chart/chart.min.js"></script>
    <script src="{x_res_common}/chart/echarts.min.js"></script>

    <script src="{x_res_common}/_other/easypiechart.js"></script>
    <script src="{x_res_common}/bootstrap-daterangepicker/moment.min.js"></script>

    <script src="f__func.js?v={v}"></script>
    <link rel="stylesheet" href="f__index.css?v={v}" type="text/css">
    <script src="f__index.js?v={v}"></script>
</head>
<body>
<!---->
<!---->
<!---->
<div id="vm">
    <div class="container-fluid" style="background-color: #374359;">
        <div class="row" style="height: 10px;"></div>
        <div class="row">
            <div class="col-xs-4 date">
                <div class="small font-color-hui">{{cash_date | date("YYYY")}}年</div>
                <div class="font-small-x"><span class="font-big-x">{{cash_date | date("MM")}}</span>月<span
                        class="caret"></span></div>
            </div>
            <div class="col-xs-4">
                <div class="small font-color-hui">支出(元)</div>
                <div class="top-spen-x font-small-x">{{ cash_pay }}¥</div>
            </div>
            <div class="col-xs-4">
                <div class="small font-color-hui">收入(元)</div>
                <div class="top-spen-x font-small-x">{{ cash_income }}¥</div>
            </div>
        </div>
    </div>
    <!---->
    <!---->
    <!---->
    <div id="vm-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">明细</a>
            </li>
            <li role="presentation">
                <a class="month-cart" href="#month-cart" aria-controls="profile" role="tab" data-toggle="tab">本月数据分析</a>
            </li>
            <li role="presentation">
                <a class="year-cart" href="#year-cart" aria-controls="profile" role="tab" data-toggle="tab">本年数据分析</a>
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="container">
                    <!---->
                    <!---->
                    <!-- 数据填充 -->
                    <div v-for="(cashbook, index) in cashbook_list">
                        <div class="row row-first">
                            <div class="col-xs-12 font-color-hui">{{ cashbook.cashrec_date}}</div>
                        </div>
                        <div class="row row-font-size row-x" v-for="(cashbook_sub, index) in cashbook.list">
                            <a :href="'f__add.html?id=' + cashbook_sub.entity_cashrec.cashrec_id">
                                <div class="col-xs-6"><span>{{cashbook_sub.cashrec_type}}</span></div>
                                <div :class="'col-xs-6 text-right ' + ab_type_class(cashbook_sub.entity_cashrec.cashrec_ab_type)">
                                    {{ cashbook_sub.entity_cashrec.cashrec_ab_type +
                                    cashbook_sub.entity_cashrec.cashrec_num }}
                                </div>
                            </a>
                        </div>
                    </div>
                    <!---->
                    <!---->
                    <!---->
                    <div class="row" style="margin-top: 10px;"></div>
                    <div class="row">
                        <div class="text-center font-color-hui more">
                            查看更多...
                        </div>
                    </div>
                    <div class="row" style="margin-top: 40px;"></div>
                </div>
                <!---->
                <!---->
                <!---->
                <div class="text-center navbar-fixed-bottom add">
                    <a href="f__add.html">﹢&nbsp;&nbsp;记一笔</a>
                </div>
            </div>
            <!---->
            <!---->
            <!-- 月数据分析  -->
            <div role="tabpanel" class="tab-pane" id="month-cart">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <h3>{{cash_date | date("MM")}}月</h3>
                        </div>
                    </div>
                    <!---->
                    <!---->
                    <!-- 饼图 -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">类型支出比例情况</div>
                                <div class="panel-body">
                                    <div id="pie-chart" class="canvas-wrapper" style="width: 100%; height: 350px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---->
                    <!---->
                    <!---->
                    <div class="row month-easycart">
                    </div>
                    <!---->
                    <!---->
                    <!---->
                </div>
            </div>
            <!---->
            <!---->
            <!-- 类型弹框 -->
            <div id="compModalType" class="modal fade bs-example-modal-lg" tabindex="-1">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">{{ cashbook_type }}</h4>
                        </div>
                        <div class="modal-body" style="max-height: 50%; overflow: scroll;">
                            <table class="table table-striped">
                                <tr>
                                    <th style="width: 30%;">日期</th>
                                    <th>描述</th>
                                    <th>金额</th>
                                </tr>
                                <tr v-for="(cashbook, index) in cashbook_type_list">
                                    <td>{{ cashbook.date }}</td>
                                    <td>{{ cashbook.cashrec_desc }}</td>
                                    <td :class="ab_type_class(cashbook.entity_cashrec.cashrec_ab_type)">
                                        {{ cashbook.entity_cashrec.cashrec_ab_type + cashbook.entity_cashrec.cashrec_num
                                        }}¥
                                    </td>
                                </tr>
                            </table>
                            <div class="row">
                                <div class="text-center font-color-hui more_type">
                                    查看更多...
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
            </div>
            <!---->
            <!---->
            <!---->
            <div role="tabpanel" class="tab-pane" id="year-cart">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <h3>{{cash_date | date("YYYY")}}年</h3>
                        </div>
                    </div>
                    <!---->
                    <!---->
                    <!-- 条形图 -->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">每月支出情况</div>
                                <div class="panel-body">
                                    <div class="canvas-wrapper">
                                        <div id="line-chart" style="width: 100%; height: 200px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---->
                    <!---->
                    <!---->
                    <div class="row">
                        <div class="col-xs-8">
                            <select class="form-control" v-model="type">
                                <option v-for="(type, key) in types" :value="key">{{ type }}</option>
                            </select>
                        </div>
                        <div class="col-xs-3">
                            <input type="button" class="form-control btn btn-success year-type-cart" value="查看"/>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 8px;"></div>
                    <!---->
                    <!---->
                    <!---->
                    <div class="row type" style='display:none;'>
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">每月{{ types[type] }}支出情况</div>
                                <div class="panel-body">
                                    <div class="canvas-wrapper">
                                        <div id="bar-chart" style="width: 100%; height: 200px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---->
                    <!---->
                    <!---->
                </div>
            </div>
        </div>
        <!---->
        <!---->
        <!---->
    </div>
</div>
</body>
</html>

<script>
    var vm = new Vue({
        el: '#vm',
        data: {
            message: 'Hello Vue!',
            cash_date: new Date(),
            cashbook_list: [],
            cashbook_type_list: [],
            cashbook_type: "加载中...",
            cash_pay: 0,
            cash_income: 0,
            types: [],
            type: "",
        },
        methods: {
            func_click: function ()
            {
                //this.seen = !this.seen;
            },
            ab_type_class: function (ab_type)
            {
                if (ab_type == "+")
                {
                    return "text-success";
                }

                return "font-color-hui";
            },
        },
        filters: {
            date: function (val, type)
            {
                return moment(val).format(type);
            }
        },
    });


    func_page_init();
</script>